<template>
  <div class="box">
    <header>
      <div class="header">
        <input type="text" placeholder="搜索" v-model="searchStr" @click="onSearch">
        <van-icon name="like" size="0.2rem" color="green"/>
      </div>
    </header>
    <main>
      <div class="banner">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="val in banner" :key="val.bannerId">
            <van-image
              width="100vw"
              :src="val.src"
            />
          </van-swipe-item>
        </van-swipe>
      </div>
      <van-grid :column-num="4">
        <router-link v-for="val in kindList" :key="val.icon" to="/kind" tag="li">
          <van-grid-item>
          <span :class="['iconfont',val.icon]"></span>
          <p>{{val.title}}</p>
        </van-grid-item>
        </router-link>
      </van-grid>
      <div class="time">
        <h2>限时秒杀</h2>
        <van-count-down :time="time" />
        <span>更多秒杀></span>
      </div>
      <van-grid :border="false" :column-num="2">
        <van-grid-item>
          <van-image src="https://m.360buyimg.com/mobilecms/s843x843_jfs/t1/169355/33/2262/168927/5ffd0689E745e8328/16c8d57923ab7ef0.jpg!q70.dpg.webp" />
        </van-grid-item>
        <van-grid-item>
          <van-image src="https://m.360buyimg.com/mobilecms/s750x750_jfs/t4297/120/375562832/241785/c162c78b/58b3c779Na1ec50a0.jpg!q80.dpg.webp" />
        </van-grid-item>
        <p>￥29.3</p>
        <p>￥19.3</p>
      </van-grid>
      <van-tabs v-model="active" @click="getKinds">
      <van-tab v-for="val in kindsList" :title="val" :key="val">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
          <router-link v-for="val in pros" :key="val.lastPrice" :to="'/detail/'+val.proId">
          <van-card
          :price="val.beforePri"
          :desc="val.desc"
          :title="val.proname"
          :thumb="val.img"
          :origin-price="val.lastPri"
          />
          </router-link>
          </van-list>
        </van-pull-refresh>
      </van-tab>
      </van-tabs>
    </main>
  </div>
</template>

<script>
import Vue from 'vue'
import { getBanner, getKindpro, getKinds } from '@/api/request.js'
import { Icon, Swipe, SwipeItem, Card, Grid, GridItem, Image as VanImage, Tab, Tabs, Toast, PullRefresh, List, CountDown } from 'vant'
Vue.use(Icon)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Card)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(VanImage)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Toast)
Vue.use(PullRefresh)
Vue.use(List)
Vue.use(CountDown)
export default {
  data () {
    return {
      time: 30 * 60 * 60 * 1000,
      searchStr: '',
      kindList: [{
        icon: 'icon-shuichan',
        title: '海鲜水产'
      },
      {
        icon: 'icon-shuiguo',
        title: '时令水果'
      },
      {
        icon: 'icon-liangyou',
        title: '粮油调味'
      },
      {
        icon: 'icon-shengxian-shucai',
        title: '新鲜蔬菜'
      },
      {
        icon: 'icon-lingshi',
        title: '休闲零食'
      },
      {
        icon: 'icon-rou',
        title: '肉禽蛋类'
      },
      {
        icon: 'icon-riyongbaihuo',
        title: '日用百货'
      },
      {
        icon: 'icon-jiushui',
        title: '酒水乳品'
      }],
      banner: [],
      active: 0,
      kindsList: [],
      pros: [],
      refreshing: false,
      loading: false,
      finished: false,
      index: 0,
      s: '品质升级'
    }
  },
  methods: {
    onSearch () {
      this.$router.push('/search')
      // this.$router.push({ name: 'Search', params: { searchStr: this.searchStr } })
    },
    getKinds (name, title) {
      this.s = title
      this.index = 0
      this.finished = false
      getKindpro({
        event: title,
        num: 10,
        index: 0
      }).then(data => {
        this.pros = data.data.msg
      })
    },
    onRefresh () {

    },
    onLoad () {
      this.loading = true
      // console.log(this.s)
      getKindpro({
        event: this.s,
        num: 10,
        index: this.index++
      }).then(data => {
        this.loading = false
        this.pros = [...this.pros, ...data.data.msg]
        // console.log(this.index)
        console.log(data.data.msg.length)
        if (data.data.msg.length < 1) {
          this.finished = true
        }
      })
    }
  },
  mounted () {
    getBanner().then(data => {
      this.banner = data.data.msg
    })
    getKinds().then(data => {
      this.kindsList = data.data.data
    })
    getKindpro({
      event: '品质升级',
      num: 10,
      index: 0
    }).then(data => {
      this.pros = data.data.msg
      console.log(this.pros)
    })
  }
}
</script>
<style lang="scss">
  .van-grid{
    background: rgb(240, 255, 254);
    border-radius: 0.3rem;
    p{
      color: rgb(243, 1, 171);
    }
  }
  .van-count-down{
    color: white;
    background: red;
    width: 0.7rem;
    border-radius: 0.12rem;
    text-align: center;
    align-items: center;
    line-height: 0.25rem;
  }
  .time{
   padding: 0 0.1rem;
   display: flex;
   justify-content: space-between;
   h2{
     font-size: 0.2rem;
     color: rgb(245, 74, 174);
   }
  }
  .box{
    display: flex;
    flex-direction: column;
    overflow: auto;
    .colon {
    display: inline-block;
    margin: 0 4px;
    color: #ee0a24;
  }
  .block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #ee0a24;
  }
    header{
      width: 100vw;
      height: 1.5rem;
      background: rgb(255, 94, 0);
      border-radius: 0 0 0.4rem 0.4rem;
      display: flex;
      padding-top: 0.1rem;
      flex-direction: column;
      .header{
        display: flex;
        input{
          margin-left: 0.15rem;
          width: 80%;
          height: 0.3rem;
          border-radius: 0.2rem;
        }
        .van-icon-like::before{
          margin-top: 0.08rem;
          margin-left: 0.02rem;
        }
        .van-icon{
          margin-left: 0.1rem;
        }
      }
    }
    .van-hairline--top{
      background: white;
    }
    main{
      margin-top: -1rem;
      overflow: auto;
      flex: 1;
      .iconfont{
        font-size: 0.4rem;
        color: rgb(0, 43, 128);
      }
      .van-grid{
        justify-content: space-around;
      }
      .banner{
        width: 95%;
        margin-left: 0.1rem;
        margin-top: 0.15rem;
        border-radius: 0.1rem;
        // overflow: hidden;
      }
      .van-card{
        margin-top: 0;
        border-bottom: 0.01rem solid #ccc;
      }
      .van-image{
        height: 100%;
      }
      .van-image__img{
        height: 100%;
      }
    }
  }
</style>
